{block name=head}
    <style>
        .nav>li>a {
            padding:5px;
        }
        .nav-tabs>li>a {
            border:0;
            background:#E2E2E2;
            color:#7E7D7D;
            margin-right:0;
            border-left:2px solid #ddd;
        }
        .nav-tabs>li>a:first-child {
            border:0;
        }
        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
            border:0;
            background:#56B648;
        }
        .nav-tabs>li.active>a:after {
            z-index:1000000;
            border-bottom-color: #fff;
            border-top-color:transparent;
            border-width: 8px;
            margin-left: -8px;
            margin-top:-16px;
        }
        .nav-tabs>li {
            cursor:pointer;
            margin-left:-.27em;
            width:10em;
            text-align:center;
            padding-bottom:0;
            margin-bottom:0;
        }
        .thumbnail a>img, .thumbnail>img {
            margin:0;
        }
        .thumbnail {
            border:0;
            border-radius:0;
            margin-bottom:1em;
        }
        a,a:hover,a:active,a:visited {
            text-decoration:none;
        }
        .home-news-title {
            color:#0A8C3D;
        }
        .home-news-title:hover {
            color:#F08D00;
        }
        .home-news-content {
            color:#77B389;
        }
    </style>
{/block}
{block name=body}
    <div id="enrolblock">
        <div class="container" id="enrolin">
            <div class="row">
                <img src="/images/greencircles.png" alt="" id="greencircles" />
                <img src="/images/yellowcircles.png" alt="" id="yellowcircles" />
                <div class="hidden-xs col-sm-6 col-md-7">
                    <img src="/images/kids.png" alt="" class="img-responsive" id="kids" />
                </div>
                <div class="col-sm-5 col-md-4 col-lg-3 col-md-offset-1 col-lg-offset-1" id="enroltop" >
                    <!--             <form id="search-classes-form" method="get" action="/enrol/search"> -->
                    <form id="login-form" data-attr-id="login-form" role="form" accept-charset="UTF-8" action="" method="post">
                        <input type="hidden" value="login" name="action" id="action" />
                        <input type="hidden" value="/my-account" name="redirect" class="redirect" />
                        <input type="hidden" name="formToken" id="formToken" value="{$token}" />
                        <div id="enrolbook">
                            <span class="bold">{$lang.home.welcome}</span>
                        </div>
                        <div id="bulletin">{$listing_title}</div>
                        <label for="username">{$lang.login.username}</label>
                        <div class="form-group">
                            <input type="text" value="" class="form-control username req" id="username" name="username" required>
                        </div>
                        <label for="password">{$lang.login.password}</label>
                        <div class="form-group">
                            <input class="form-control" type="password" id="password1" name="pass" autocomplete="off" required/>
                            <span class="form-help-block"><a href="/login-register">{$lang.login.noregister}</a></span>
                        </div>
                        <div class="error-alert" style="display:none;">
                            <div class="alert alert-danger fade in ">
                                <button class="close" aria-hidden="true" type="button" onclick="$(this).closest('.error-alert').fadeOut('slow');">&times;</button>
                                <strong></strong>
                            </div>
                        </div>
                        <button class="enquire" type="submit"><span>{$lang.login.login}</span></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="new-nav-container" style="width:100%;">
        {*主标题  $res    副标题  $articleInfo*}
        <!-- Nav tabs -->
        <div style="overflow:auto;margin-bottom:10px;position:relative;" id="tagList">
            <ul class="nav nav-tabs" style="padding:0 5.2em;width:100%;" role="tablist" id="newsNavTabs">
                {assign var="i" value=0}
                {foreach $tabs as $tab}
                    <li role="presentation" data-tabid="{$tab.id}" class="new-nav-item-tab-container {if $i eq 0} active {/if} " style="">
                        <a href="#tab{$tab.id}" class="new-nav-item-tab" aria-controls="tab{$tab.id}" role="tab" data-toggle="tab">{$tab.title}</a>
                    </li>
                    {$i=$i+1}
                {/foreach}
            </ul>
        </div>

        <!-- Tab panes -->
        <div class="tab-content container" id="newsNavContent">
            {foreach from=$articleInfo key=i item="newGroup"}
                <div role="tabpanel" class="tab-pane" id="tab{$i}">
                    {foreach $newGroup as $new}
                        <div class="col-sm-4 home-news-container" style="cursor:pointer;" data-newid="{$new.id}">
                            <a class="thumbnail" href="our-program/news-info?articleid={$new.id}" style="display:flex;position:relative;">
                                <img src="{$new.image}" class="home-news-img" style="width:35%;margin-right:1em;">
                                <div style="flex:1;">
                                    <h3 class="home-news-title" style="margin-top:5px;margin-bottom:5px;font-size: 19px">{$new.title}</h3>
                                    <span style="font-size:.8em;color:#A3A3A3;">{$new.modified}</span>
                                </div>
                            </a>
                            <p style="line-height:1em;margin-bottom:.5em;word-break: break-all;height:3em;font-size:.8em;overflow:hidden;color:#777;padding: 0px">{$new.content}</p>
                        </div>
                    {/foreach}
                </div>
            {/foreach}
            <div class="new-nav-content-more" style="font-size:.8em;height:2em;line-height:2em;text-align:right;padding-right:2%;cursor:pointer;">
                <a style="color:#e4393c;">
                    <span class="glyphicon glyphicon-triangle-right" style="vertical-align: text-top;"></span><span class="glyphicon glyphicon-triangle-right" style="margin-left: -.5em;vertical-align: text-top;"></span><span class="glyphicon glyphicon-triangle-right" style="margin-left: -.5em;vertical-align: text-top;"></span><span>MORE</span>
                </a>
            </div>
        </div>
        <script type="text/javascript">
            $($("#newsNavTabs>li.active>a").attr("href")).addClass("active");
        </script>
    </div>
    <div id="orangeblock">
        <div class="bottom visible-xs">
            <a href="#content">
                <img src="/images/down.png" alt="" />
            </a>
            <div>{$lang.home.about_str}</div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>{$lang.home.home.h1}</h1>
                </div>
                <div class="col-xs-6 col-sm-2">
                    <a href="/our-program/benefits">
                        <div class="orangeitem">
                            <img src="/images/benefits.png" alt="" class="img-responsive" />
                        </div>
                        <div class="orangeitemtitle">{$lang.home.title_benefits}</div>
                    </a>
                </div>
                <div class="col-xs-6 col-sm-2">
                    <a href="/our-program/sports">
                        <div class="orangeitem">
                            <img src="/images/sports.png" alt="" class="img-responsive" />
                        </div>
                        <div class="orangeitemtitle">{$lang.home.title_sports}</div>
                    </a>
                </div>
                <div class="col-xs-6 col-sm-2">
                    <a href="/our-program/locations">
                        <div class="orangeitem">
                            <img src="/images/locations.png" alt="" class="img-responsive" />
                        </div>
                        <div class="orangeitemtitle">{$lang.home.title_locations}</div>
                    </a>
                </div>
                <div class="col-xs-6 col-sm-2">
                    <a href="/our-program/term-dates">
                        <div class="orangeitem">
                            <img src="/images/dates.png" alt="" class="img-responsive" />
                        </div>
                        <div class="orangeitemtitle"><span class="hidden-sm">{$lang.home.title_date}</span>
                            <span class="visible-sm">{$lang.home.terms}</span></div>
                    </a>
                </div>
                <div class="col-xs-6 col-sm-2">
                    <a href="/parties-and-events">
                        <div class="orangeitem">
                            <img src="/images/parties.png" alt="" class="img-responsive" />
                        </div>
                        <div class="orangeitemtitle">{$lang.home.title_parties}</div>
                    </a>
                </div>
                <div class="col-xs-6 col-sm-2">
                    <a href="/franchises/become-a-franchisee">
                        <div class="orangeitem">
                            <img src="/images/franchise.png" alt="" class="img-responsive" />
                        </div>
                        <div class="orangeitemtitle">{$lang.home.title_franchises}</div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="content">
        <div class="container">
            <div class="col-xs-12" id="contenttext">
                {$listing_content1}
            </div>
        </div>
    </div>

    <div id="blueblock">
        <div class="container">
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-5">
                        <picture>
                            <img alt="师资团队" src="/images/intro1.png">
                        </picture>
                        <div class='slash pull-right'>
                            <div class='content'></div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="step">
                            <h3 class="font-alt">师资团队</h3>
                            <p>澳睿跑所有聘请外教均具有儿童教育或体育专业背景，且所有主教练均具有澳洲体育协会认证机构审核的教练资格证。</p>

                        </div>
                    </div>
                </div><!-- .row -->

                <div class="row">
                    <div class="col-sm-5 col-sm-push-7">
                        <picture>
                            <img alt="场馆设计" src="/images/intro2.png">
                        </picture>
                        <div class='slash pull-left'>
                            <div class='content'></div>
                        </div>
                    </div>
                    <div class="col-sm-7 col-sm-pull-5">
                        <div class="step">
                            <h3 class="font-alt">场馆设计</h3>
                            <p>澳睿跑在场馆设计中运用了多功能、多场馆、安全环保的立体化设计，同时采用进口过滤新风空气循环系统，只为给孩子创造更专业、更健康、更舒适的个性化运动学习环境。</p>
                        </div>
                    </div>
                </div><!-- .row -->

                <div class="row">
                    <div class="col-sm-5">
                        <picture>
                            <img alt="个性化数据服务" src="/images/intro3.png">
                        </picture>
                        <div class='slash pull-right'>
                            <div class='content'></div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <div class="step">
                            <h3 class="font-alt">个性化数据服务</h3>
                            <p>为了能够让家长清晰的了解孩子每堂课的成长，澳睿跑专门引进了大数据运动技能评测系统，让孩子每堂课的收获都能做到有据可依，让家长们可以一同见证孩子们每一次的进步。</p>
                        </div>
                    </div>
                </div><!-- .row -->
            </div>
        </div>
    </div>

    <!-- agegroup start -->
    <div id="agegroup">
        <div class="container">
            <div class="col-sm-12">
                <img alt="年龄层" src="/images/agegroup.png">
            </div>

            <!-- Features start -->
            <div class="col-sm-6 col-md-4 col-lg-4">
                <div class="features-item">
                    <div class="features-icon">
                        <img src="/images/readygroup1.png">
                    </div>
                    教学内容主要以学习基础运动技能为主，培养学员的注意力、专注力和语言兴趣。同时，通过课上有趣活泼的运动氛围，让孩子们充分的感受到团队合作的运动精神。
                </div>
            </div>
            <!-- Features end -->

            <!-- Features start -->
            <div class="col-sm-6 col-md-4 col-lg-4">
                <div class="features-item">
                    <div class="features-icon">
                        <img src="/images/readygroup2.png">
                    </div>
                    学员更加容易听懂并跟随老师的指挥，在锻炼大肌肉群和手眼协调的同时，可适当的加强运动技巧和各种技能的训练，以有效挖掘学员的运动潜质。
                </div>
            </div>
            <!-- Features end -->

            <!-- Features start -->
            <div class="col-sm-6 col-md-4 col-lg-4">
                <div class="features-item">
                    <div class="features-icon">
                        <img src="/images/readygroup3.png">
                    </div>
                    教学节奏会明显加快，课程内容会加入一些具有挑战性的活动，根据不同的运动项目，展开更深一步的专业训练，以使得学员能够得到全方面的发展。
                </div>
            </div>
            <!-- Features end -->

        </div>
    </div>
    <!-- agegroup end -->

    <!-- photo start -->
    <div class="">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="/images/carousel1.jpg" alt="">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="/images/carousel2.jpg" alt="">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="/images/carousel3.jpg" alt="">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="/images/carousel4.jpg" alt="">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">上一页</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">下一页</span>
            </a>
        </div>
    </div>
    <!-- photo end -->

    <!-- saying start -->
    <div id="content">
        <div class="container">
            {if $listing_content2 || $listing_content3 || $listing_content4 }
                <div class="col-sm-12" id="flexout">
                    <div class="flexslider">
                        <ul class="slides">
                            {if $listing_content2}
                                <li>
                                    {$listing_content2}
                                </li>
                            {/if}
                            {if $listing_content3}
                                <li>
                                    {$listing_content3}
                                </li>
                            {/if}
                            {if $listing_content4}
                                <li>
                                    {$listing_content4}
                                </li>
                            {/if}
                        </ul>
                    </div>
                </div>
            {/if}
        </div>
    </div>
    <!-- saying end -->
    <!-- {include file='yellowblock.tpl'} -->

{/block}

{block name=tail}
    <script type="text/javascript" src="/includes/js/jquery.flexslider-min.js"></script>
{literal}
    <script type="text/javascript">
        $(function(){
            if($(".tab-pane").length==0){
                $(".new-nav-container").hide();
            }

            var containerWidth=0;
            $("#newsNavTabs li").each(function(){
                containerWidth+=$(this).width();
            });


            $('select').selectBoxIt();

            //pc端显示新闻效果
            $(".home-news-container a.thumbnail>img").height($(".home-news-container a.thumbnail>img").width()*.75+"px");

            if(window.innerWidth>=992){
                $("#tagList").css({"margin-top":"-42px"});
                if((containerWidth+36)>(window.screen.width*.65)){
                    $("#newsNavTabs").width((containerWidth+72)/(window.screen.width)*100+"%");
                    $("#tagList").css({"width":"65%"});
                }
            }else{
                $(".home-news-img-info").show();
                $("#newsNavTabs").css({"padding-left":"2em"});
                if(containerWidth+36>window.screen.width){
                    $("#newsNavTabs").width((containerWidth+72)/window.screen.width*100+"%");
                }
            }
            $(".home-news-container>p").each(function(){
                if($(this).html().length>50){
                    $(this).html($(this).html().slice(0,46)+"...<span class='home-news-content'>[详情]</span>");
                }
            });
            $(".home-news-title").each(function(){
                if($(this).html().length>27){
                    $(this).html($(this).html().slice(0,25)+"...");
                }
            });
            $(".new-nav-item-tab-container").on('mouseenter',function(e){
                e.preventDefault();
                $(this).find('a').click();
            });
//    var lastTab=$("#newsNavTabs li:last-child")[0];
//    $("#newsNavTabs").width((lastTab.offsetLeft+lastTab.offsetWidth)/window.innerWidth*100+"%");

            //more news action
            $(".new-nav-content-more a").on("click",function(e){
                e.preventDefault();
                var tabId=$(".new-nav-item-tab-container.active").attr("data-tabid");
                window.location.href="/our-program/news-list?tabId="+tabId;
            });
        });
        $(document).ready(function(){
            $.validator.addMethod("username", function(value) {
                var phone = /^1[34578]\d{9}$/;
                var email = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                return phone.test(value) || email.test(value);
            }, '手机号或邮箱错误');
            $('#login-form').validate();
            $("#enrolsuburb").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "/process/postcodesuburbs",
                        dataType: "json",
                        data: {
                            query: request.term
                        },
                        success: function(data) {
                            response(data.values);
                        }
                    });
                },
                messages: {
                    noResults: '',
                    results: function() {}
                },
                minLength: 3
            });
        });
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                directionNav: false
            });
            $('#enroltop').show();
        });
    </script>
{/literal}
{/block}